<html>

	<head>
		<meta charset="utf-8">
		<title>掌上工单</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" href="css/common.css" />	
		<link rel="stylesheet" href="css/common_article.css" />
		<style>
			.title{
				background-color: rgba(0,153,204,.9);
			}
			.mui-content{
				margin-bottom: 4px;
			}
			.mui-icon{
				color: #FFFFFF;
			}
			.label{
				color: #7E7878;
			}
			.primary{
				color: #007aff;
				padding-top: 8px;
			}
			.delay{
				margin-left: 3%;
				width: 45%;
				height: 85%;
				float: left;
				top: 0;
			}
			.complete{
				margin-right: 3%;
				width: 45%;
				height: 85%;
				float: right;
			}
		</style>
	</head>
	
	<script id='goingon-template' type="text/template">
		<% if(row){ %>
			<div class="mui-content-padded mui-input-group"  style="margin: 0;">
				<div style="height: auto;text-align: center; padding: 10px;">
					<label style="width: auto;font-size: 20;"><%=( row.businessdescription || '')%></label>
				</div>
				<div class="mui-input-row " style="color: #FFFFFF; background: #0099CC;">
					<label style="width: auto;">
					基本信息
					</label>
				</div>
				<div class="mui-input-row" style="height: auto;">
					<label class="label">工单编号</label>
					<label style="width: auto;"><%=( row.workno || '')%></label>
				</div>
	
				<div class="mui-input-row" style="height: auto;">
					<label class="label">联系人名</label>
					<label style="width: auto;"><%=( row.username || '')%></label>
				</div>
				
				<div class="mui-input-row" style="height: auto;">
					<label class="label">联系电话</label>
					<label style="width: auto;"><%=( row.userphoneno || '')%></label>
					<span onclick="plus.device.dial( <%=( row.userphoneno || '')%>, true );" class="mui-icon mui-icon-phone-filled primary"></span>
				</div>
				
				<div class="mui-input-row" style="height: auto;">
					<label class="label">来电电话</label>
					<label style="width: auto;"><%=( row.incomingphoneno || '')%></label>
					<span onclick="plus.device.dial( <%=( row.incomingphoneno || '')%>, true );" class="mui-icon mui-icon-phone-filled primary"></span>
				</div>
				
				<div class="mui-input-row" style="height: auto;">
					<label class="label">来电时间</label>
					<label style="width: auto;"><%=( row.inComingdate || '')%></label>
				</div>
				
				<div class="mui-input-row" style="height: auto;">
					<label class="label">下发时间</label>
					<label style="width: auto;"><%=( row.cdate || '')%></label>
				</div>
				
				<div class="mui-input-row" style="height: auto;">
					<label class="label">派单人</label>
					<label style="width: auto;"><%=( row.sendUserName || '')%></label>
				</div>
				
				<div class="mui-input-row" style="height: auto;">
					<label class="label">任务地址</label>
					<label style="width: auto;"><%=( row.useraddress || '')%></label>
				</div>
				<div class="mui-input-row" style="height: auto;">
					<label class="label">等级名称</label>
					<label style="width: auto;"><%=( row.taskLevelName || '')%></label>
				</div>
				<div class="mui-input-row" style="height: auto;">
					<label class="label">来源名称</label>
					<label style="width: auto;"><%=( row.taskSourceName || '')%></label>
				</div>
				<div class="mui-input-row" style="height: auto;">
					<label class="label">升级名称</label>
					<label style="width: auto;"><%=( row.isUpWorderName || '')%></label>
				</div>
				<div class="mui-input-row" style="height: auto;">
					<label class="label">热力站名</label>
					<label style="width: auto;"><%=( row.heatingStation || '')%></label>
				</div>
				<div class="mui-input-row" style="height: auto;">
					<label class="label">任务备注</label>
					<label style="width: auto;"><%=( row.remark || '无')%></label>
				</div>
			</div>
			<div class="mui-input-row " style="color: #FFFFFF;background: #0099CC;">
				<label style="width: auto;">
				操作备注
				</label>
			</div>
			<div  class="mui-input-row" style="height: auto;">
				<div class="mui-collapse-content mui-input-group">
					<div class="mui-input-group">
						<% 
							var transfers = row.transfers;
							for(var i = 0;i < transfers.length;i ++){
								var transferType = transfers[i].transfertype;
								var workOrderStatus = '派送';
								if('1' == transferType){
									workOrderStatus = '派送';
								}else if('2' == transferType){
									workOrderStatus = '接单';
								}else if('3' == transferType){
									workOrderStatus = '延时';
								}else if('4' == transferType){
									workOrderStatus = '完成';
								}else if('7' == transferType){
									workOrderStatus = '拒绝';
								}else{
									workOrderStatus = '待确定';
								}
						%>
							<div class="mui-input-row"  style="height: auto;">
								<h5 class="mui-content-padded"><%=transfers[i].odate || '' %></h5>
								<label style="width: auto;"><%=workOrderStatus%> -> <%=transfers[i].remark || '无' %></label>
							</div>
						<%}%>
					</div>
				</div>
			</div>
			
		<%}%>
		
	</script>
	
	<body>
		<header class="mui-bar mui-bar-nav title">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" style="color: #FFFFFF;">任务详情</h1>
		</header>
		<div class="mui-bar mui-bar-tab btn-detail"  id='btn-opears' style="display: block; background: rgba(0,0,0,0);-webkit-box-shadow:0 0 0px rgba(0,0,0,.85)">
			<button class="mui-btn mui-btn-block mui-btn-danger delay" style="top: 2;">延时</button>
			<button class="mui-btn mui-btn-block mui-btn-primary complete" style="top: 2;">完成</button>
		</div>
		<div class="mui-content" id="task-content">
			
		</div>
	</body>
	<script src="js/mui.min.js"></script>
	<script src="js/mui.zoom.js"></script>
	<script src="js/mui.previewimage.js"></script>
	<script src="js/arttmpl.js"></script>
	<script type="text/javascript" src="js/md5.js" ></script>
	<script type="text/javascript" src="js/uuid.js" ></script>
	<script type="text/javascript" src="js/utils.js" ></script>
	<script>
	var taskId = 0,search = '';
		mui.previewImage();
		mui.plusReady(function() {
			taskId = xhz.getString("taskId") ;
			search = xhz.getString("search") ;
			xhz.ajax(URL_TASK_DETAIL,{taskId:taskId},function(data){
				if(!data || data.code != 1){
					mui.toast('你刷的太勤快了，亲');
					return ;
				}
				
				afterGotData(data.data);
			}) ;
			
			afterGotData = function(detail){
				console.debug(JSON.stringify(detail)) ;
				
				var detailInfo = template('goingon-template', {
									"row": detail
								});
				
				document.getElementById('task-content').innerHTML = detailInfo;
			};
			
		});
		
		var aniShow = "pop-in";
		var btnArray = ['取消','确认']; 
		mui(".btn-detail").on("tap",".delay",function(event){
	  			var href = 'task-delay.html';
				var webview_style = {
					popGesture: "close"
				};
				mui.openWindow({
					id: 'task-delay',
					url: href,
					styles: webview_style,
					show: {
						aniShow: aniShow
					},
					waiting: {
						autoShow: true
					},
					extras:{
				    	taskId:taskId,
				    	search:search
				    }
				});
//				mui.later(function() {
//					var cview = plus.webview.currentWebview();
//					cview.close() ;
//				}, 500);
			});
			mui(".btn-detail").on("tap",".complete",function(event){
	  			var href = 'task-complete.html';
				var webview_style = {
					popGesture: "close"
				};
				mui.openWindow({
					id: 'task-complete',
					url: href,
					styles: webview_style,
					show: {
						aniShow: aniShow
					},
					waiting: {
						autoShow: true
					},
					extras:{
				    	taskId:taskId,
				    	search:search
				    }
				});
				
//				mui.later(function() {
//					var cview = plus.webview.currentWebview();
//					cview.close() ;
//				}, 1000);
			});
			//重写返回方法
//			mui.back = function(){
//				mui.currentWebview.close();//返回关闭当前页面
//			}
//			callback = function(e){
//				mui.currentWebview.close();//返回关闭当前页面
//			}
//			window.addEventListener("goingon:close", callback);
	
	
	</script>

</html>